/**
 * MAIN CSS FOR DARK THEMING
 */

// DARK STYLES
body.dark {
  background-color: var(--grey-7);

  // CodeMirror scrollbar annotations
  .sb-annotation {
    background-color: var(--bg-annotation-dark);
  }

  ::-webkit-scrollbar-thumb {
    background-color: var(--c-primary-shade);
  }

  ::-webkit-scrollbar-thumb:window-inactive {
    background-color: darken(@c-primary-shade, 20%);
  }

  .dragger {
    color: white;
    background-color: var(--grey-6);
  }

  // To make opacity to toolbar better looking

  // To make it appear as if the editor is larger than thought,
  // by colouring the file manager resizer's background according to
  // the editor's, and not according to the file-list.
  #file-manager {

    #file-manager-resize,
    #file-manager-inner-resizer {
      background-color: var(--grey-8);

      &:hover::after {
        background-color: rgba(255, 255, 255, 0.4);
      }
    }

    #file-manager-inner-resizer {
      background-color: transparent;
    }
  }

  // Now all other, bigger stylings.

  @import "file-tree.less";

  @import "file-list.less";

  @import "toolbar.less";

  @import "editor.less";

  @import "document-tabs.less";

  @import "codemirror.less";

  @import "popup.less";

  @import "sidebar.less";

  @import "window-controls.less";

  @import "modal.less";

  @import "menubar.less";

  @import "application-menu.less";


  .table-helper-align-button-container,
  .table-helper-remove-button-container,
  .table-helper-add-button {
    background-color: white;
  }
}
